<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>资讯</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/view.css">
</head>
<body>
<div>
    <a href="add.html" class="layui-btn"><i class="layui-icon">&#xe654;</i>添加资讯</a>
</div>
<table class="layui-table">
    <thead>
    <tr>
        <th>序号</th>
        <th>标题   </th>
        <th>标签</th>
        <th>点击量 </th>
        <th>发布时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
        <td>人生就像是一场修行</td>
        <td class="infos">人生就像是一场修行</td>
        <td>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-small layui-btn-primary look-info">
                    <i class="layui-icon">&#xe60b;</i>查看
                </button>
                <button class="layui-btn layui-btn-small layui-btn-primary">
                    <i class="layui-icon">&#xe642;</i>编辑
                </button>
                <button class="layui-btn layui-btn-small layui-btn-primary">
                    <i class="layui-icon">&#xe640;</i>删除
                </button>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<div id="page"> </div>

<script src="../../layui/layui.js"></script>
<script>
    layui.use(['laypage','layer','jquery'], function(){
        var laypage = layui.laypage;
        var layer = layui.layer;
        var $ = layui.jquery
        //翻页
        laypage.render({
            elem: 'page',
            count: 50
        });

        //模态框
        $('body').on('click','.look-info',function () {
            var info = $(this).parents('td').siblings('.infos').html();
            layer.open({
                type: 1,
                area: ['80%', 'auto'],
                offset:'100px',
                content: '<div style="padding: 20px">'+info+'</div>' //
            });
        });
    });
</script>
</body>
</html>